<!--
 * @Author: zhuxiaoyi
 * @Date: 2023-12-20 15:04:02
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2023-12-21 22:12:24
 * @Description: 
-->
<template>
    <el-row>
        <el-col :span="24">
            <div class="guide-container" :style="`width:${viewwidth}px;height:${viewHeight - 60}px`">
                <el-image class="img" :style="`width:${1527}px;height:${840}px;`" :src="background" :fit="'scale-down'" />
                <div class="guide-container-inner" :style="`width:${1527}px;height:${840}px;`">
                    <div class="btn1"></div>
                    <el-popover placement="right" :width="700" trigger="click">
                            <template #reference>
                                <div @click="" class="btn2"><!-- 数据采集 --></div>
                            </template>
                            <el-image :src="background1"  />
                        </el-popover>
                    <div @click="buttonClick('/index/labeling')" class="btn3"><!-- 实体标注 --></div>
                    <div @click="buttonClick('/index/labeling')" class="btn4"><!-- 结果导出 --></div>
                    <div @click="oepnDialog" class="btn5"><!-- BERT模型 --></div>
                    <div @click="buttonClick('/index/matching')" class="btn6"><!-- 匹配模式 --></div>
                    <div @click="buttonClick('/index/prediction')" class="btn7"><!-- 工具预测 --></div>
                    <div class="btn8" @click="drawer = true"><!-- 模型预测 --></div>
                    <div @click="buttonClick('/index/align')" class="btn9"><!-- 实体对齐 --></div>
                    <div @click="buttonClick('/index/graph')" class="btn10"><!-- 图谱成果展示 --></div>
                </div>
            </div>
        </el-col>
    </el-row>

    <el-dialog v-model="dialogTableVisible" title="BERT模型输入数据及参数设置">
        <el-row>
            <el-col :span="12" style="box-sizing: border-box;padding: 10px;">
                <el-card>
                    <el-upload v-model:file-list="fileList" class="upload-demo"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3"
                        :on-exceed="handleExceed">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                Assesses the model's performance.
                            </div>
                        </template>
                    </el-upload>
                </el-card>
            </el-col>
            <el-col :span="12" style="box-sizing: border-box;padding: 10px;">
                <el-card>
                    <el-upload v-model:file-list="fileList1" class="upload-demo"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3"
                        :on-exceed="handleExceed">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                Trains the model.
                            </div>
                        </template>
                    </el-upload>
                </el-card>
            </el-col>
            <el-col :span="12" style="box-sizing: border-box;padding: 10px;">
                <el-card>
                    <el-upload v-model:file-list="fileList2" class="upload-demo"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3"
                        :on-exceed="handleExceed">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                Tunes and validates the model.
                            </div>
                        </template>
                    </el-upload>
                </el-card>
            </el-col>
            <el-col :span="12" style="box-sizing: border-box;padding: 10px;">
                <el-card>
                    <el-upload v-model:file-list="fileList3" class="upload-demo"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3"
                        :on-exceed="handleExceed">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                Provides correct answers for training and testing.
                            </div>
                        </template>
                    </el-upload>
                </el-card>
            </el-col>
            <el-form label-width="260px" :label-position="'left'">
                <el-row>
                    <el-col :span="12" v-for="(item, index) in form" :key="index"
                        style="box-sizing: border-box;padding: 10px;">
                        <el-form-item :label="item.name">
                            <el-input v-model="item.value" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-col :span="12" style="box-sizing: border-box;padding: 10px;">
                <el-card>
                    <el-upload v-model:file-list="fileList4" class="upload-demo"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3"
                        :on-exceed="handleExceed">
                        <span>水利预训练模型</span>
                        <el-button style="margin-left:170px" type="warning">加载已保存模型</el-button>
                        <template #tip>
                            <div class="el-upload__tip">

                            </div>
                        </template>
                    </el-upload>
                </el-card>
            </el-col>
        </el-row>
        <template #footer>
            <div class="dialog-footer" style="display: flex;justify-content:center">
                <el-button @click="dialogTableVisible = false">取消</el-button>
                <el-button type="primary" @click="processHandler">
                    确定
                </el-button>
            </div>
        </template>
        <el-progress :percentage="percentage" :color="customColors" />


        <!--   <ul v-if="showDocument">
            <li>
                <el-icon>
                    <Document />
                </el-icon> configjson 2021/7/27 1:38 JSON 文件 2 KB
            </li>
            <li>
                <el-icon>
                    <Document />
                </el-icon> pytorch model.bin 2021/6/30 8:45 BIN 文件 399.650 KB
            </li>
            <li>
                <el-icon>
                    <Document />
                </el-icon> vocab.txt 2021/7/27 1:38 文本文档 107 KB
            </li>
        </ul> -->
    </el-dialog>


    <el-drawer v-model="drawer" title="知识抽取" direction="rtl" size="35%" :with-header="false">、

        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="BERT模型">
                <el-select v-model="formInline.region" placeholder="BERT模型权重" clearable>
                    <el-option label="0" value="0" />
                    <el-option label="0.1" value="0.1" />
                    <el-option label="0.2" value="0.2" />
                    <el-option label="0.3" value="0.3" />
                    <el-option label="0.4" value="0.4" />
                    <el-option label="0.5" value="0.5" />
                    <el-option label="0.6" value="0.6" />
                    <el-option label="0.7" value="0.7" />
                    <el-option label="0.8" value="0.8" />
                    <el-option label="0.9" value="0.9" />
                    <el-option label="1" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="模式匹配">
                <el-select v-model="formInline.region1" placeholder="模式匹配权重" clearable>
                    <el-option label="0" value="0" />
                    <el-option label="0.1" value="0.1" />
                    <el-option label="0.2" value="0.2" />
                    <el-option label="0.3" value="0.3" />
                    <el-option label="0.4" value="0.4" />
                    <el-option label="0.5" value="0.5" />
                    <el-option label="0.6" value="0.6" />
                    <el-option label="0.7" value="0.7" />
                    <el-option label="0.8" value="0.8" />
                    <el-option label="0.9" value="0.9" />
                    <el-option label="1" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="工具预测">
                <el-select v-model="formInline.region2" placeholder="工具预测权重" clearable>
                    <el-option label="0" value="0" />
                    <el-option label="0.1" value="0.1" />
                    <el-option label="0.2" value="0.2" />
                    <el-option label="0.3" value="0.3" />
                    <el-option label="0.4" value="0.4" />
                    <el-option label="0.5" value="0.5" />
                    <el-option label="0.6" value="0.6" />
                    <el-option label="0.7" value="0.7" />
                    <el-option label="0.8" value="0.8" />
                    <el-option label="0.9" value="0.9" />
                    <el-option label="1" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <!-- <el-button type="primary" @click="onSubmit">Query</el-button> -->
            </el-form-item>
        </el-form>


        <p style=" margin:  20px">
            模式匹配规则选择
        </p>
        <el-transfer :titles="['Source', 'Target']" v-model="value" :data="data" />
        <p style=" margin:  20px">
            工具预测规则选择
        </p>
        <el-transfer :titles="['Source', 'Target']" v-model="value1" :data="data1" />
        <p style="margin-top: 10px;margin-bottom: 20px;">
            <el-button type="primary" @click="processHandler">
                开始预测
            </el-button>
            <el-button type="success" v-if="showButton" @click="buttonClick('/index/modelPrediction')">
                模型预测结果查看
            </el-button>
        </p>
        <el-progress :percentage="percentage" :color="customColors" />

    </el-drawer>
</template>
<script  setup>
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import background from '@/assets/img/guide.png'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Document, Delete, Edit, Search, Plus, Upload } from '@element-plus/icons-vue'
import background1 from '@/assets/img/gather.png'
let showDocument = ref(false)
let viewHeight = ref(window.innerHeight);
let viewwidth = ref(window.innerWidth);
let drawer = ref(false)
let showButton = ref(false)
const router = useRouter()
const buttonClick = function (url) {
    router.push(url)
}
const formInline = reactive({
    region: '',
    region1: '',
    region2: '',
})

let dialogTableVisible = ref(false)

const oepnDialog = function () {
    dialogTableVisible.value = true
}

const processHandler = function () {
    let timimg = setInterval(() => {
        increase()
    }, 1000)

    setTimeout(() => {
        timimg = null
        showButton.value = true
        showDocument.value = true
        /* ElMessage({
            message: '模型预测成功',
            type: 'success',
        }) */
    }, 20000)

}


const value = ref([])
const data = ref(
    [
        {
            key: 9,
            label: '规则一（工具规则）'
        },
        {
            key: 10,
            label: "规则二（工具规则）"
        }, {
            key: 11,
            label: "规则三（工具规则）"
        }, {
            key: 12,
            label: '规则四（工具规则）'
        }, {
            key: 13,
            label: '规则五（工具规则）'
        }, {
            key: 14,
            label: "规则六（工具规则）"
        }, {
            key: 15,
            label: "规则七（工具规则）"
        }, {
            key: 16,
            label: "规则八（工具规则）"
        }
    ]
)

const value1 = ref([])
const data1 = ref(
    [{
        key: 1,
        label: "规则一（模式规则）"
    },
    {
        key: 2,
        label: "规则二（模式规则）"
    },
    {
        key: 3,
        label: "规则三（模式规则）"
    },
    {
        key: 4,
        label: " 规则四（模式规则）"
    },
    {
        key: 5,
        label: "规则五（模式规则）"
    },
    {
        key: 6,
        label: "规则六（模式规则）"
    },
    {
        key: 7,
        label: '规则七（模式规则）'
    },
    {
        key: 8,
        label: '规则八（模式规则）'
    },

    ]
)
let form = [
    {
        "name": "最大输入长度（max_seq_length）",
        "value": "128"
    },
    {
        "name": "训练轮次（Epoch）",
        "value": "10"
    },
    {
        "name": "训练批次（Batch size）",
        "value": "32"
    },
    {
        "name": "保存步骤数（save_steps）",
        "value": "425"
    },
    {
        "name": "隐藏层激活函数（hidden_act）",
        "value": "gelu"
    },
    {
        "name": "权重初始化范围（initializer_range）",
        "value": "0.02"
    },

    {
        "name": "中间层大小（intermediate_size）",
        "value": "3072"
    },

    {
        "name": "池化层全连接层大小（pooler_fc_size）",
        "value": "768"
    },

    {
        "name": "池化类型（pooler_type）",
        "value": "first_token_transform"
    }
]



const fileList = ref([

    {
        name: '测试集',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },
])
const fileList1 = ref([
    {
        name: '训练集—20220912.txt',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },

])
const fileList2 = ref([
    {
        name: '验证集—20220912.txt',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },

])
const fileList3 = ref([
    {
        name: '标签集—20220912.txt',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },

])
const fileList4 = ref([
    {
        name: 'configjson',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },
    {
        name: 'pytorch model.bin',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },
    {
        name: 'vocab.txt',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },

])

const handleRemove = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}

const handlePreview = (uploadFile) => {
    console.log(uploadFile)
}

const handleExceed = (files, uploadFiles) => {
    ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
        } totally`
    )
}

const beforeRemove = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
        () => true,
        () => false
    )
}

const percentage = ref(0)

const customColors = [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#6f7ad3', percentage: 100 },
]


const increase = () => {
    percentage.value += 5
    if (percentage.value > 100) {
        percentage.value = 100
    }
}

</script>
    
<style lang="scss" scoped>
.guide-container {
    position: relative;
    display: flex;
    justify-content: center;

    .img {
        position: absolute;
    }

    .guide-container-inner {
        position: absolute;
    }

    .btn1 {
        position: relative;
        width: 155px;
        height: 57px;
        left: 85px;
        top: 250px;
        border-radius: 50px;
        transition: all 0.1s;
        border: 4px solid rgba(255, 255, 255, 0);

        &:hover {
            border: 4px solid #FF9800;
            cursor: pointer;
        }
    }

    .btn2 {
        position: relative;
        width: 138px;
        height: 55px;
        left: 94px;
        top: 289px;
        transition: all 0.1s;
        border: 4px solid rgba(255, 255, 255, 0);

        &:hover {
            border: 4px solid #5490ff;
            cursor: pointer;
        }
    }

    .btn3 {
        position: relative;
        width: 42px;
        height: 134px;
        left: 372px;
        top: 360px;
        transition: all 0.2s;
        border: 4px solid rgba(255, 255, 255, 0);

        &:hover {
            border: 4px solid #57bd87;
            cursor: pointer;
        }
    }

    .btn4 {
        position: relative;
        width: 42px;
        height: 134px;
        left: 454px;
        top: 225px;
        transition: all 0.2s;
        border: 4px solid rgba(255, 255, 255, 0);

        &:hover {
            border: 4px solid #57bd87;
            cursor: pointer;
        }
    }

    .btn5 {
        position: relative;
        width: 67px;
        height: 134px;
        left: 621px;
        top: 92px;
        transition: all 0.2s;
        border-radius: 12px;
        border: 4px solid rgba(255, 255, 255, 0);

        &:hover {
            border: 4px solid #ffa5f0;
            cursor: pointer;
        }
    }

    .btn6 {
        position: relative;
        width: 67px;
        height: 134px;
        left: 718px;
        top: -42px;
        transition: all 0.2s;
        border-radius: 12px;
        border: 4px solid rgba(255, 255, 255, 0);

        &:hover {
            cursor: pointer;
            border: 4px solid #ffa5f0;
        }
    }

    .btn7 {
        position: relative;
        width: 67px;
        height: 134px;
        left: 814px;
        top: -174px;
        transition: all 0.2s;
        border-radius: 12px;
        border: 4px solid rgba(255, 255, 255, 0);

        &:hover {
            border: 4px solid #ffa5f0;
            cursor: pointer;
        }
    }

    .btn8 {
        position: relative;
        width: 137px;
        height: 50px;
        left: 684px;
        top: -114px;
        transition: all 0.2s;
        border-radius: 25px;

        &:hover {
            border: 4px solid #5490ff;
            cursor: pointer;
        }
    }

    .btn9 {
        position: relative;
        width: 136px;
        height: 54px;
        left: 994px;
        top: -359px;
        transition: all 0.2s;
        border: 4px solid rgba(255, 255, 255, 0);

        &:hover {
            cursor: pointer;
            border: 4px solid #5490ff;
        }
    }

    .btn10 {
        position: relative;
        width: 154px;
        height: 53px;
        left: 1295px;
        top: -206px;
        transition: all 0.2s;
        border-radius: 30px;
        border: 4px solid rgba(255, 255, 255, 0);

        &:hover {
            cursor: pointer;
            border: 4px solid #FF9800;

        }
    }
}
</style>
<style lang="scss"></style>